<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框操作例子</title>
</head>
<body>
    <div style="width:680px;margin: 0 auto;">
        <!--onfocus表示光标在文本框内，onblur表示光标移出文本框-->
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键词"  />
        <input type="submit" value="搜索" />
    </div>
      <!--新版本浏览器，一句就可以解决input标签这个功能了：-->
    <div style="width:680px;margin: 0 auto;">
        <input type="text" placeholder="请输入关键词" />
        <input type="submit" value="搜索" />
    </div>
    <script>
        function Focus(){
            var tag = document.getElementById('i1')
            var val = tag.value;
            if (val == "请输入关键词"){
                tag.value = '';
            }
        }
        function Blur(){
            var tag = document.getElementById('i1')
            if (tag.value == ''){
                tag.value = "请输入关键词"
            }
        }
    </script>
</body>
</html>